<template>
  <div>
    <button @click="changeDateBtn1">我数树状图一个的按钮</button>
    <button @click="changeDateBtn2">我数树状图多个的按钮</button>
    <div id="container" :style="{ height: '800px', width: '100%' }" />
  </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  data() {
    return {
      getTreedata: [
        {
          id: 'root',
          label: '汉字',
          name: 1,
          children: []
        }
      ],
      treedata: [
        {
          id: 'root',
          label: 'rdfgsssssssasdfffffffffffffffffffffffffffffffffoot',
          name: 1,
          context: 'root悬框',
          children: [
            {
              id: 'c1',
              label: 'c1',
              name: 2,
              context: 'c1悬框',
              children: [
                {
                  id: 'c1-1',
                  label: 'c1-1',
                  name: 3
                },
                {
                  id: 'c1-2',
                  label: 'c1-2',
                  name: 3,
                  children: [
                    {
                      id: 'c1-2-1',
                      label: 'c1-2-1',
                      name: 4
                    },
                    {
                      id: 'c1-2-2',
                      label: 'c1-2-2',
                      name: 4
                    }
                  ]
                }
              ]
            },
            {
              id: 'c2',
              label: 'c2',
              name: 2
            },
            {
              id: 'c3',
              label: 'c3',
              name: 2,

              children: [
                {
                  id: 'c3-1',
                  label: 'c3-1',
                  name: 3
                },
                {
                  id: 'c3-2',
                  label: 'c3-2',
                  name: 3,

                  children: [
                    {
                      id: 'c3-2-1',
                      label: 'c3-2-1',
                      name: 4
                    },
                    {
                      id: 'c3-2-2',
                      label: 'c3-2-2',
                      name: 4
                    },
                    {
                      id: 'c3-2-3',
                      label: 'c3-2-3',
                      name: 4
                    }
                  ]
                },
                {
                  id: 'c3-3',
                  label: 'c3-3',
                  name: 3
                }
              ]
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.showChart(this.treedata)
  },
  methods: {
    changeDateBtn1() {
      this.showChart(this.getTreedata)
    },
    changeDateBtn2() {
      this.showChart(this.treedata)
    },
    showChart(value) {
      console.log('======', value)
      const data = value[0]
      const container = document.getElementById('container')

      if (container) {
        const width = container.clientWidth
        const height = container.clientHeight
        const tooltip = new G6.Tooltip({
          offsetX: 70,
          offsetY: 20,
          getContent(e) {
            console.log('e==', e.item._cfg.model.context)
            const outDiv = document.createElement('div')
            outDiv.style.width = '180px'
            outDiv.innerHTML = `
            <ul id="nodeDetails" style="backgroundColor: pink">
              <li style="color:red; font-weight:bold; backgroundColor: pink">名称: ${
                e.item._cfg.model.context
              }</li>
            </ul>`
            return outDiv
          },
          itemTypes: ['node']
        })
        const graph = new G6.TreeGraph({
          // 图的DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
          container: container,
          width: width,
          height: height,
          plugins: [tooltip],
          // 设置画布的模式 包含default 模式和 edit 模式
          modes: {
            // default 模式中包含点击选中节点行为和拖拽画布行为
            default: [
              {
                type: 'collapse-expand',
                trigger: 'click'
              },
              // 拖拽画布 和 缩放画布
              'drag-canvas',
              'zoom-canvas'
            ]
          },
          // 默认的节点设置
          defaultNode: {
            //节点的大小
            type: 'rect',
            // size: 14,
            // // 指定边连入节点的连接点的位置
            // anchorPoints: [[0, 0.5], [1, 0.5]],
            // 节点样式
            style: {
              radius: 4,
              lineWidth: 2,
              fill: '#fff',
              stroke: '#fff'
            },
            // 节点文字
            labelCfg: {
              style: {
                fontSize: 5
                // fill: '#000',
                // cursor: 'move'
              }
            }
          },
          // 默认的配置
          defaultEdge: {
            type: 'cubic-horizontal',
            style: {
              stroke: '#A3B1BF'
            }
          },
          layout: {
            type: 'compactBox',
            direction: 'LR',
            // 指定节点 ID
            getId: function getId(d) {
              console.log('====dd', d)
              return d.id
            },
            // 指定节点高度
            getHeight: function getHeight() {
              return 16
            },
            //指定节点宽度
            getWidth: function getWidth() {
              return 16
            },
            // 指定节点之间的垂直间距
            getVGap: function getVGap() {
              return 10
            },
            // 指定节点之间的水平间距
            getHGap: function getHGap() {
              return 100
            }
          }
        })

        // 为不同节点进行不同的配置 必须在 render 之前调用
        graph.node(function(node) {
          return {
            style: {
              fill: node.depth == 2 && node.status ? '#fff' : '#fff',
              stroke: node.depth == 2 && node.status ? 'pink' : '#6b9bfa'
            },
            //String 类型。标签文本的文字内容
            label: node.label,
            labelCfg: {
              // 文本的偏移
              offset: 10,
              // 文本相对于节点的位置
              position:
                node.children && node.children.length > 0 ? 'center' : 'center',
              //文本样式
              style: {
                fill: node.depth == 2 && node.status ? '#c1422b' : '#2c3e50'
              }
            }
          }
        })

        //初始化数据
        graph.data(data)
        //渲染视图
        graph.render()
        //让画布内容适应视口
        graph.fitView()
      }
    }
  }
}
</script>

<style scoped>
#nodeDetails {
  list-style: none;
  background-color: blue;
}
#nodeDetails > li {
  padding: 5px 0;
  text-align: left;
  background-color: red;
}
::v-deep .g6-component-tooltip {
  background-color: #ccc;
}
</style>
